@import "./element-cover.scss";
@import "../assets/iconfont/iconfont.css";

html,body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
}

html,body {
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  // background: #f9f9f9;
  background: #fff;
  -webkit-text-size-adjust: 100%;
  min-width: 1280px;
  height: 100vh;
}
a { color: #2d374b;text-decoration: none; }
a:hover { text-decoration: none; }
em { font-style: normal; }
li {list-style: none;}
img { border: 0;vertical-align: middle;}
table {border-collapse: collapse;border-spacing: 0;}
p {word-wrap: break-word;}
body > .el-container { margin-bottom: 40px;}
.logo { width: 260px; height: 60px; color: #fff;}
.logo img {height: 60px;}
.logo h1 {color: #fff;}
.deepBlue { color: #0013a7;}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ellipsis-m {
  -webkit-line-clamp: 2; // 用来限制在一个块元素显示的文本的行数
  display: -webkit-box;  // 将对象作为弹性伸缩盒模型显示
  -webkit-box-orient: vertical;  //设置或检查伸缩盒对象的子元素的排列方式
  text-overflow: ellipsis;  // 在多行文本的情况下，用...隐藏超出范围的文本
  word-break: break-all;
  overflow: hidden;
}

.expand-cell { background-color: #e4e6ff;}
.expand-cell .title {color: #6c74b1;}
.expand-cell p {margin-bottom: 10px;}
.bold {font-weight: 600;}
.fs-2 {font-size: 1.5rem;}
.fs14 {font-size: 14px;}
.fs16 {font-size: 16px;}

.center {position: absolute; left: 50%; top: 50%;transform: translate(-50%, -50%);}
.d-center {display: flex; justify-content: center; align-items: center; align-content: center;}
.d-flex { display: flex;}
.flex-column { flex-direction: column;}
.flex-start {justify-content: flex-start;}
.flex-end {justify-content: flex-end;}
.flex-center { justify-content: center;}
.align-center { align-items: center;}
.space-between { justify-content: space-between;}
.space-around { justify-content: space-around;}
.flex-wrap {flex-wrap: wrap;}
.flex-1 { flex: 1;}

.w40 { width: 40%;}
.w45 { width: 45%;}
.w50 {width: 50%;}
.w60 { width: 60%;}
.w70 { width: 70%;}
.w80 {width: 80%;}
.w90 { width: 90%;}
.w100 { width: 100%;}

.mx10 { margin: 0 10px;}
.mx20 {margin: 0 20px;}
.mx30 { margin: 0 30px;}

.my10 { margin: 10px 0;}
.my20 { margin: 20px 0;}
.my30 {margin: 30px 0;}

.mr-1 {margin-right: 10px;}
.mr-2 {margin-right: 20px;}
.mr-3 {margin-right: 30px;}

.ml-1 { margin-left: 10px;}
.ml-2 { margin-left: 20px;}
.ml-3 { margin-left: 30px;}

.mb-1 { margin-bottom: 10px;}
.mb-2 { margin-bottom: 20px;}
.mb-3 { margin-bottom: 30px;}

.mt-1 { margin-top: 10px;}
.mt-2 { margin-top: 20px;}
.mt-3 { margin-top: 30px;}

@media screen and (max-width: 750px) {
  html,
  body {
    min-width: 100%;
  }
  body {
    .login-wrapper {
      background: none;
      background-color: #fff;
      .box {
        width: 100%;
        margin-bottom: 100px;
        .left {
          display: none;
        }
        .right {
          width: 100%;
        }
      }
    }
    .el-message-box__wrapper {
      .el-message-box {
        width: 80%;
      }
    }
  }
}
@media screen and (max-width: 1250px) {
  html,
  body {
    min-width: 100%;
    .login-wrapper {
      background: none;
      background-color: #fff;
      .box {
        width: 100%;
        margin-bottom: 100px;
        .left {
          display: none;
        }
        .right {
          width: 100%;
        }
      }
    }
  }
  .main .el-main {
    margin-left: 0;
    padding: 20px 20px 100px;
  }
}
